<template>
  <div class="ke-open-class">
    <ke-title :title="'精选vip课程'" />
    <ul class="courseList">
      <li v-for="(course, index) in courseList" :key="index" @click="handleToOpencourse(index)">
        <ke-intro
          :courseName="course.courseSrc.coursename"
          :buyNumber="course.courseSrc.buyNum"
          :poster="require('../../assets/images/linux.jpg')"
          :price="course.courseSrc.price"
          :teacherName="course.courseSrc.teacherName"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ke-open-class',
  components: {
    keTitle: () => import('../ke-title'),
    keIntro: () => import('../ke-intro')
  },
  data() {
    return {
      courseList: [],
      courseSrc: {}
    }
  },
  created() {
    this.getOpenCourse()
  },
  methods: {
    getOpenCourse() {
      this.$axios
        .get('/api/course/courseList', {
          params: {
            type: '精选VIP课程'
          }
        })
        .then(res => {
          const courseList = res.data.data.ret
          this.courseList = courseList
        })
    },
    handleToOpencourse(index) {
      this.courseSrc = this.courseList[index]
      this.$store.dispatch('setCourseSrc', this.courseSrc)
      this.$router.push('/opencourse/overview')
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-open-class {
  position: relative;
  width: 1210px;
  margin: 0 auto;
  padding-top: 23px;
  box-sizing: border-box;
  overflow: hidden;

  .courseList {
    height: 500px;
    padding-left: 0;
    border-top: 8px solid #eeeeee;
    padding-top: 8px;
    box-sizing: border-box;
    overflow: scroll;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      width: 0px;
    }

    li {
      list-style: none;
      float: left;
      width: 240px;
      height: 234px;
      box-sizing: border-box;
      cursor: pointer;
      border: 1px solid transparent;

      &:hover {
        border: 1px solid #dddddd;
      }
    }
  }
}
</style>
